<template>
    <div class="multi-selection common-cascader">
        <div class="course-sub clear" v-if="!isSchool">
            <span>教育局/学校</span>
            <div class="course-li clear">
                <label v-for="(item,index) of unitData" :key="item.id" @change="getGradeData(index,item.id,item.app_code)">
                    <input type="radio" name="course2" :checked="index == unitChecked" />
                    <el-badge value="局" type="primary" class="item" v-if="0 < index && index < (educationData.length + 1)">
                        <span>{{ item.name }}</span>
                    </el-badge>
                    <span v-else>{{ item.name }}</span>
                </label>
            </div>
        </div>
        <!-- 选择学校的时候才显示 -->
        <template v-if="unitChecked > educationData.length || isSchool">

            <div class="course-sub clear">
                <span>年级/专业</span>
                <div class="course-li clear">
                    <label v-for="(item, index) of gradeData" :key="index" @change="getSubjectData(index,item.id)">
                        <input type="radio" name="course3" :checked="index == gradeChecked" />
                        <span>{{ item.name }}</span>
                    </label>
                </div>
            </div>

            <div class="course-sub clear">
                <span>科目</span>
                <div class="course-li clear">
                    <label v-for="(item, index) of subjectData" :key="item.id" @change="subjectChange(index, item.id)">
                        <input type="radio" name="course4" :checked="index == subjectChecked" />
                        <span>{{ item.name }}</span>
                    </label>
                </div>
            </div>
        </template>

        <div class="course-sub clear" v-if="this.type">
            <span>类别</span>
            <div class="course-li clear">
                <label v-for="(item, index) of classifyData" :key="item.id" @change="changeClassify(index, item.id)">
                    <input type="radio" name="course5" :checked="index == classifyChecked" />
                    <span>{{ item.name }}</span>
                </label>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            type:{
                type: String,
                default:""
            }
        },
        data() {
            return {
                educationData:[],
                schoolData: [],
                unitChecked: 0,
                platform_id:0,
                school_code:'',

                gradeData: [],
                gradeChecked: 0,
                grade_id: 0,

                subjectData: [],
                subjectChecked: 0,
                subject_id: 0,

                classifyData:[],
                classifyChecked:0,
                classify_id:0,
            };
        },
        created () {

        },
        mounted() {
            
            if(this.isSchool){
                this.getGradeData(0,0,this.CheckSchoolAppCode);
            }else{
                 this.getEducation();
            }

            this.getSchool();
            if(this.type==='resource'){
                this.getResourceClassify();
            }else if(this.type==='video'){
                this.getVideoClassify();
            }
        },
        computed:{
            isSchool(){
                return this.$store.getters.isSchool;
            },
            CheckSchoolAppCode(){
                let Code = sessionStorage.getItem('CheckSchoolAppCode')  
                return Code ? Code : '00000000000000000000000000000000';
            },
            // 教育局/学校数据合并
            unitData(){
                let data = [...this.educationData,...this.schoolData];
                data.unshift({ id: 0, name: '全部' });
                return data;
            }
        },
        beforeDestroy() {},
        methods: {
            //教育局身份-获取教育局数据
            getEducation() {
                if(this.isSchool)return;
                let params = {
                    app_code: this.CheckSchoolAppCode,
                    type:"all_array",
                    updown:"down",
                    server_type: 2,
                };
                let success = res => {
                    if(res.data&&res.data.length>0){
                        this.educationData = res.data;
                    }
                };
                this.$ajax.get('api/newlevel/get_updown_platform', {
                    params: params,
                    func: { success: success }
                });
            },
            //教育局身份-获取学校数据
            getSchool() {
                let params = {
                    app_code: this.CheckSchoolAppCode,
                    type:"all_array",
                    updown:"down",
                    server_type: 1,
                };
                let success = res => {
                    if(res.data&&res.data.length>0){
                        this.schoolData = res.data;
                    }
                };
                this.$ajax.get('api/newlevel/get_updown_platform', {
                    params: params,
                    func: { success: success }
                });
            },

            //获取年级
            getGradeData(index,id,school_code) {
                this.school_code = school_code;
                this.unitChecked = index;
                this.platform_id = id;
                this.gradeChecked = 0;
                this.grade_id = 0;
                this.subjectChecked = 0;
                this.subject_id = 0;
                if(this.type==='resource'){
                    this.getResourceClassify();
                }else if(this.type==='video'){
                    this.getVideoClassify();
                }
                this.responseData();
                if(index > this.educationData.length||this.isSchool){//教育局没有绑定年级和科目，只有点击学校选项的时候才获取年级和科目
                    let params = {
                        level:3,
                        platform_id:id,
                        direction:"balance",
                    };
                    const success = res => {
                        this.gradeData = res.data;
                        this.gradeData.unshift({ id: 0, name: '全部' });
                        this.getSubjectData(0,0);

                    };
                    this.$ajax.get('api/newlevel/platform_org', {
                        params: params,
                        func: { success: success }
                    });
                }

            },
            //获取学科
            getSubjectData(index,id) {
                this.gradeChecked = index;
                this.grade_id = id;
                this.subjectChecked = 0;
                this.subject_id = 0;
                let params = {
                    type:2,
                    org_id: id,
                    app_code:this.school_code,
                };
                const success = res => {
                    this.subjectData = res.data;
                    this.subjectData.unshift({ id: 0, name: '全部' });
                    this.responseData();
                };
                this.$ajax.get('api/newlevel/platform_subject', {
                    params: params,
                    func: { success: success }
                });
            },
            subjectChange(index,id) {
                this.subjectChecked = index;
                this.subject_id = id;
                this.responseData();
            },  
            getResourceClassify(){
                let success = res => {
                    this.classifyData = res.data;
                    this.classifyData.unshift({ id: 0, name: '全部' });
                    this.classify_id = 0;
                };
                this.$ajax({
                    url: 'api/resource/resource_cate',
                    method: 'get',
                    params: {
                        app_code:this.CheckSchoolAppCode,
                        // platform_id: this.platform_id,
                        keyword:"",
                    },
                    func: { success: success }
                });
            },
            getVideoClassify(){
                let success = res => {
                    this.classifyData = res.data;
                    this.classifyData.unshift({ id: 0, name: '全部' });
                    this.classify_id = 0;
                };
                this.$ajax({
                    url: 'api/video/video_cate',
                    method: 'get',
                    params: {
                        app_code:this.CheckSchoolAppCode,
                        // platform_id: this.platform_id,
                        keyword:"",
                    },
                    func: { success: success }
                });
            },
            changeClassify(index,id){
                this.classifyChecked = index;
                this.classify_id = id;
                this.responseData();
            },
            responseData(){
                const res = {
                    school_code: this.school_code,
                    platform_id: this.platform_id,
                    grade_id: this.grade_id,
                    subject_id: this.subject_id,
                    classify_id: this.classify_id,
                };
                this.$emit('resChosed', res)
            },
        }
    }

</script>

<style lang="scss">
.multi-selection{

    .course-sub {
        font-size: 14px;
        line-height: 19px;
        margin-bottom: 10px;
    }

    .course-sub > span {
        display: block;
        float: left;
        color: #666666;
        width: 80px;
        overflow: hidden;
        height: 19px;
        text-align: left;
    }

    .course-sub:last-of-type {
        margin-bottom: 0;
    }

    .course-li {
        margin-left: 100px;
        min-height: 29px;
    }

    .course-li > label {
        // float: left;
        color: #000000;
        cursor: pointer;
        margin: 0 3.7735849057% 10px 0;
    }
    .course-li > label > input:checked + span,.course-li > label > input:checked + .el-badge {
        color: #348efc;

    }

    .course-li > label input {
        display: none;
    }

    .course-li > label:hover {
        color: #61a4f5;
    }
}

</style>